/*
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

@use "sass:math";

@mixin shadow-dropDown($baseColor: #000) {
    box-shadow: 0 5px 10px 0 rgba($baseColor, 0.3);
}

@mixin font-style-base() {
    font-weight: $global-normal_fontWeight;
    font-size: $global-medium_fontSize;
    line-height: $global-base_lineHeight;
    @if ($staticVariables) {
        font-family: $global-body_fontFamily;
        color: $global-color_fg;
    }
}

@mixin font-link() {
    transition: color 0.1s ease-out;
    font-family: $link-body_fontFamily;
    font-weight: $link-body_fontWeight;
    font-size: $link-body_fontSize;
    @if ($staticVariables) {
        color: $link_default-color;
    }
    line-height: inherit;

    @if ($staticVariables) {
        &:focus,
        &:hover {
            color: $link_default_hover-color;
        }
    }
}

@mixin font-heading() {
    font-family: $global-heading_fontFamily;
    font-weight: $global-heading_fontWeight;
    font-size: $global-large_fontSize;
    line-height: $global-condensed_lineHeight;
}

@mixin font-heading-link() {
    font-family: $link-heading_fontFamily;
    font-weight: $link-heading_fontWeight;
    font-size: $link-heading_fontSize;
    line-height: $global-base_lineHeight;
}

@mixin noPanel {
    .Frame-content {
        > .Container {
            max-width: 800px;
        }

        .Content {
            width: 100%;
        }

        .Panel {
            display: none;
        }
    }
}

@mixin srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@mixin maxWidth($width: $theme-breakpoint_base) {
    @media screen and (max-width: $width) {
        @content;
    }
}

@mixin minWidth($width: $theme-breakpoint_base) {
    @media screen and (min-width: $width) {
        @content;
    }
}

@function image($imageName) {
    @return url("/themes/chipde/design/images/#{$imageName}");
}

@mixin clearfix() {
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

@mixin ellipsis() {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

@mixin framePadding($includeVertical: false) {
    padding-left: $frame_padding;
    padding-right: $frame_padding;

    @if ($includeVertical) {
        padding-top: $frame_padding;
        padding-bottom: $frame_padding;
    }

    @include maxWidth {
        padding-left: $frame-mobile_padding;
        padding-right: $frame-mobile_padding;

        @if ($includeVertical) {
            padding-top: $frame-mobile_padding;
            padding-bottom: $frame-mobile_padding;
        }
    }
}

@mixin framePaddingReverse($includeVertical: false) {
    margin-left: -#{$frame_padding};
    margin-right: -#{$frame_padding};
    padding-left: $frame_padding;
    padding-right: $frame_padding;
    width: calc(100% + (#{$frame_padding} * 2));

    @if ($includeVertical) {
        margin-top: -#{$frame_padding};
        margin-bottom: -#{$frame_padding};
    }

    @include maxWidth {
        margin-left: -#{$frame-mobile_padding};
        margin-right: -#{$frame-mobile_padding};
        padding-left: $frame-mobile_padding;
        padding-right: $frame-mobile_padding;
        width: calc(100% + (#{$frame-mobile_padding} * 2));

        @if ($includeVertical) {
            margin-top: -#{$frame-mobile_padding};
            margin-bottom: -#{$frame-mobile_padding};
        }
    }
}

@function transition($property, $duration: $global-default_timing) {
    @return $property $global-default_easing $duration;
}

@mixin tilesContainer($colNum: 6, $margin: $utility-baseUnitDouble) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: calc(100% + #{$margin});
    margin-left: -#{$margin * 0.5};
}

@mixin tilesColumns($colNum: 6, $margin: $utility-baseUnitDouble) {
    width: calc(#{math.div(100%, $colNum)} - #{$margin});
    margin-left: #{$margin * 0.5};
    margin-right: #{$margin * 0.5};
}

@mixin aspectRatio($width, $height) {
    position: relative;

    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: math.div($height, $width) * 100%;
    }

    > *:first-child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* ---------- Lists mixins ---------- */
@mixin listItem {
    background: $component_bg;
    padding: $component-base_padding;
    box-shadow: $component_boxShadow;

    @if $component_lateralBorder == true {
        border-left: $component_border;
        border-right: $component_border;
    }

    @if $component-item_spacing == 0 {
        border-top: $component_border;

        &:first-child {
            @if $component_lateralBorder == true {
                border-top-left-radius: $component_borderRadius;
                border-top-right-radius: $component_borderRadius;
            }
        }

        &:last-child {
            border-bottom: $component_border;

            @if $component_lateralBorder == true {
                border-bottom-left-radius: $component_borderRadius;
                border-bottom-right-radius: $component_borderRadius;
            }
        }
    } @else {
        border-radius: $component_borderRadius;
        margin-bottom: $component-item_spacing;
        border-top: $component_border;
        border-bottom: $component_border;

        @if $component_lateralBorder == true {
            border-left: $component_border;
            border-right: $component_border;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    &.Read {
        opacity: 1;
    }
}

@mixin TableItem {
    @if $component-item_spacing == 0 {
        &:first-child {
            @if $component_lateralBorder == true {
                td:first-child {
                    border-top-left-radius: $component_borderRadius;
                }

                td:last-child {
                    border-top-right-radius: $component_borderRadius;
                }
            }

            td {
                border-top: $component_border;
            }
        }

        &:last-child {
            @if $component_lateralBorder == true {
                td:first-child {
                    border-bottom-left-radius: $component_borderRadius;
                }

                td:last-child {
                    border-bottom-right-radius: $component_borderRadius;
                }
            }
        }

        td {
            border-bottom: $component_border;
            @if ($staticVariables) {
                background: $component_bg;
            }
        }

        td:first-child {
            @if $component_lateralBorder == true {
                border-left: $component_border;
            }
        }

        td:last-child {
            @if $component_lateralBorder == true {
                border-right: $component_border;
            }
        }
    } @else {
        border-radius: $component_borderRadius;

        td {
            border-top: $component_border;
            border-bottom: $component_border;

            @if $component_lateralBorder == true {
                &:first-child {
                    border-left: $component_border;
                    border-top-left-radius: $component_borderRadius;
                    border-bottom-left-radius: $component_borderRadius;
                }

                &:last-child {
                    border-right: $component_border;
                    border-top-right-radius: $component_borderRadius;
                    border-bottom-right-radius: $component_borderRadius;
                }
            }
        }
    }

    @if $staticVariables {
        .CategoryName h2 {
            color: $component-title_color;
            &:focus,
            &:hover {
                color: $component-title-hover_color;
            }
        }
    }

    &.Read {
        opacity: 1;
    }
}

@mixin categoriesTableItem {
    tbody tr {
        @include maxWidth($theme-breakpoint_mobile) {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    td {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    td {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                td {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            td {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }

        @include maxWidth($theme-breakpoint_desktop) {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    .CountComments {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    .CountComments {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                .CountComments {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            .CountComments {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }

        @include maxWidth($theme-breakpoint_smallTable) {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    .CountDiscussions {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    .CountDiscussions {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                .CountDiscussions {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            .CountDiscussions {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }
    }
}

@mixin discussionsTableItem {
    tbody tr {
        @include maxWidth($theme-breakpoint_mobile) {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    td {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    td {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                td {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            td:not(.CheckBoxColumn) {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }

            .CheckBoxColumn.CheckBoxColumn {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        @include maxWidth($theme-breakpoint_desktop) {
            @if $component-item_spacing == 0 ANd $component_lateralBorder == true {
                &:first-child {
                    .CountViews {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    .CountViews {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                .CountViews {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            .CountViews {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }

        @include maxWidth($theme-breakpoint_smallTable) {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    .CountComments {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    .CountComments {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                .CountComments {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            .CountComments {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }
    }
}

@mixin groupsTableItem {
    tbody tr {
        @include maxWidth {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    td {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    td {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                td {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            td {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }

        @include maxWidth($theme-breakpoint_desktop) {
            @if $component-item_spacing == 0 AND $component_lateralBorder == true {
                &:first-child {
                    .CountDiscussions {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    .CountDiscussions {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                .CountDiscussions {
                    @if $component_lateralBorder == true {
                        border-top-right-radius: $component_borderRadius;
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            }

            .CountDiscussions {
                @if $component_lateralBorder == true {
                    padding-right: $component-base_padding;
                    border-right: $component_border;
                }
            }
        }

        @include maxWidth($theme-breakpoint_smallTable) {
            @if $component-item_spacing == 0 {
                &:first-child {
                    .CountMembers {
                        border-top-right-radius: $component_borderRadius;
                    }
                }

                &:last-child {
                    .CountMembers {
                        border-bottom-right-radius: $component_borderRadius;
                    }
                }
            } @else {
                .CountMembers {
                    border-top-right-radius: $component_borderRadius;
                    border-bottom-right-radius: $component_borderRadius;
                }
            }

            .CountMembers {
                padding-right: $component-base_padding;
                border-right: $component_border;
            }
        }
    }
}

@mixin lastCell {
    padding-right: $component-base_padding;
    @if ($component_lateralBorder) {
        border-right: $component_border;
        border-top-right-radius: $component_borderRadius;
        border-bottom-right-radius: $component_borderRadius;
    }
}

@mixin photoWrap($size: $theme-photo_size, $round: $theme-photo_round) {
    height: $size;
    width: $size;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 1px rgba($global-color_black, 0.2);
    border-radius: $theme-photo_borderRadius;
    overflow: hidden;

    @if ($round) {
        border-radius: 50%;
    }

    img {
        margin: 0;
        width: 100%;
        height: auto;
    }

    &.NoPhoto {
        display: none;
    }
}

@mixin Button(
    $bg: $button-basic_bg,
    $fg: $button-basic_fg,
    $border: $button-basic_border,
    $bgHover: $button-basic-hover_bg,
    $fgHover: $button-basic-hover_fg,
    $borderHover: $button-basic-hover_border
) {
    font-family: $formButton_fontFamily;
    transition: background 0.1s ease, border 0.1s ease;
    border: $formButton_border;
    border-style: solid;
    @if ($staticVariables) {
        font-weight: $formButton_fontWeight;
        font-size: $formButton_fontSize;
        min-width: $formButton_height;
        color: $fg;
        background: $bg;
        border-color: $border;
    }
    line-height: $formButton_height;
    min-height: $formButton_height;
    padding: 0 $formButton_padding;
    text-decoration: none;
    border-radius: $formButton_borderRadius;
    display: inline-block;
    -webkit-appearance: none;

    @include maxWidth {
        max-width: 100%;
    }

    @if ($staticVariables) {
        &:hover,
        &:active,
        &:focus {
            background: $bgHover;
            color: $fgHover;
            border-color: $borderHover;
        }
    }
}

@mixin CloseButton($color: $global-color_fg) {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $icon-default_size;
    font-family: Arial, sans-serif;
    @if ($staticVariables) {
        background: transparent;
        color: rgba($color, 0.7);
    }
    visibility: visible;

    @if ($staticVariables) {
        &:hover {
            background: transparent;
            color: $color;
        }
    }
}

/* -------------------------------------------------------------- *\
    Utility classes
\* -------------------------------------------------------------- */

.NoPanel {
    .Frame-content {
        > .Container {
            max-width: 800px;
        }

        .Content {
            width: 100%;
        }
    }

    .Panel {
        display: none;
    }
}

.flyoutIsOpen,
.NoScroll {
    @include maxWidth {
        height: 100vh;
        overflow: hidden;
    }
}

@mixin defaultTransition($properties...) {
    transition-property: $properties;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

@mixin spinnerLoader($dimension: 18px, $thickness: 3px, $color: $global-color_primary, $speed: 0.7s) {
    @include defaultTransition(opacity);
    display: block;
    width: $dimension;
    height: $dimension;
    border-radius: 50%;
    border: {
        top: $thickness solid $color;
        right: $thickness solid rgba($color, 0.3);
        bottom: $thickness solid rgba($color, 0.3);
        left: $thickness solid rgba($color, 0.3);
    }
    transform: translateZ(0);
    animation: spinnerLoader $speed infinite ease-in-out;

    &::after {
        border-radius: 50%;
        width: $dimension;
        height: $dimension;
    }
}

$spinnerOffset: 73deg;
@keyframes spinnerLoader {
    0% {
        transform: rotate($spinnerOffset);
    }
    100% {
        transform: rotate(#{360 + $spinnerOffset});
    }
}
